<div>
  <ol class="code clearfix">
    <template v-for="rule in styleRules">
      <li :key="rule.id">
        <span
          class="text selector start-tag"
          @click="onShowSelectorInput(rule)"
          v-if="!rule.showSelectorInput"
          >{{rule.selector}}</span
        >
        <input
          type="text"
          v-kb-focus
          class="text selector start-tag highlight"
          v-if="rule.showSelectorInput"
          v-model="rule.selector"
          @blur="ruleBlur(rule)"
        />
        <span class="separator">{</span>
        <ul class="css-property-list clearfix">
          <li
            v-for="dec in rule.declarations"
            :key="dec.id"
            class="css-property-group"
            :class="{'style-item-editing': dec.showDecValue }"
            @mouseover="dec.btns=true;$forceUpdate()"
            @mouseout="dec.btns=false;$forceUpdate()"
          >
            <span
              @click="dec.showDecName=true;$forceUpdate()"
              v-if="!dec.showDecName"
              class="text attribute"
              >{{dec.name}}</span
            >
            <input
              type="text"
              v-kb-typeahead="{source:propertyName,items: 6, defaultShow: false}"
              v-if="dec.showDecName"
              v-kb-focus
              @keyup.tab.enter="switchToValueInput(dec)"
              @blur="decNameInputBlur(rule,dec)"
              :placeholder="Kooboo.text.component.styleEditor.declaration"
              class="text attribute highlight input-small"
              v-model="dec.name"
            />
            <span class="separator">:</span>
            <span
              class="text value"
              :class="{empty: !dec.value}"
              v-if="!dec.showDecValue"
              @click="dec.showDecValue=true;$forceUpdate()"
              >{{dec.value + (dec.important ? " !important" : "")}};</span
            >
            <input
              type="text"
              class="text value highlight input-small"
              v-if="dec.showDecValue"
              v-kb-focus
              @focus="appendImportant(dec)"
              @blur="decValueInputBlur(dec)"
              @keyup.enter.tab="dec.showDecValue=false;$forceUpdate()"
              :placeholder="Kooboo.text.component.styleEditor.value"
              v-model="dec.inputValue"
            />
            <span v-if="dec.showDecValue" class="separator">;</span>
            <a
              v-show="ableToShowChangeImgBtn(dec)&&!dec.showDecValue&&dec.btns"
              @click="onPickImageBtnClick(dec)"
              class="btn btn-xs blue pull-right"
              >{{Kooboo.text.component.styleEditor.pickImage}}</a
            >
            <input
              v-if="ableToShowColorPicker(dec)"
              v-kb-spectrum="dec.value"
              v-model="dec.value"
              type="text"
              class="pull-left"
              style="display:none;"
            />
          </li>
        </ul>
        <a
          class="action add-css-property editable"
          href="javascript:;"
          @click="addDeclaration(rule)"
          :title="Kooboo.text.component.styleEditor.addProperty"
          ><i class="fa fa-plus-square"></i
        ></a>
        <span class="separator">}</span>
        <template v-if="showRelationBtn">
          <a
            href="javascript:;"
            class="action remove-selector"
            @click="removeSelector"
            :title="Kooboo.text.component.styleEditor.removeSelector"
            ><i class="fa fa-minus-square icon-color-red"></i
          ></a>
          <a
            @click="showRelation(rule)"
            :title="Kooboo.text.component.styleEditor.showRelation"
            class="label label-info"
          ></a>
        </template>
      </li>
    </template>
  </ol>
</div>
